import {
  Component,
  ElementRef,
  Input,
  EventEmitter,
  Output,
  Renderer,
  OnInit,
  OnChanges,
  ChangeDetectorRef
} from "@angular/core";
import { NavController } from "ionic-angular";

@Component({
  selector: "signatrue",
  templateUrl: "signatrue.component.html"
})
export class SignatrueComponent implements OnInit, OnChanges {
  @Input() inValue: string;
  @Output("outPut") outPut = new EventEmitter();
  private signature: any;
  private isConform = false;
  id1: string = "signatureid";
  id2: string = "showImage";
  constructor(
    private el: ElementRef,
    private renderer: Renderer,
    private nav: NavController,
    public cd: ChangeDetectorRef
  ) {}

  ngOnInit() {}

  ngOnChanges() {
    if (this.inValue) {
      this.id1 = this.inValue + "1";
      this.id2 = this.inValue + "2";
    }

    setTimeout(() => {
      this.signature = window["jQuery"](`#` + this.id1).jSignature({
        UndoButton: true
      });
    }, 300);
  }

  reset() {
    this.signature.jSignature("reset");
    this.cd.detectChanges();
  }

  toImage() {
    var datapair = this.signature.jSignature("getData", "image");
    let i = new Image();
    i.src = "data:" + datapair[0] + "," + datapair[1];
    window["jQuery"](`#` + this.id2).empty();
    window["jQuery"](i).appendTo(window["jQuery"](`#` + this.id2));
    this.isConform = true;
    this.outPut.emit({ imageDate: i.src });
    this.cd.detectChanges();
  }

  reSign() {
    window["jQuery"](`#` + this.id2).empty();
    this.isConform = false;
    this.cd.detectChanges();
  }
}
